<template>
  <div class="member-container">
    <!-- 顶部横幅 -->
    <div class="member-banner">
      <div class="banner-content">
        <h1>音乐VIP会员</h1>
        <p>解锁千万正版音乐，享受专属特权</p>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="member-main">
      <!-- 左侧：会员信息 -->
      <div class="member-info">
        <el-card class="info-card">
          <div class="user-level">
            <el-avatar :size="80" :src="user.avatar" class="level-avatar"></el-avatar>
            <div class="level-detail">
              <h3>{{ user.nickname }}</h3>
              <el-tag :type="user.level === 'VIP' ? 'danger' : 'info'">
                {{ user.level === 'VIP' ? 'VIP会员' : '普通用户' }}
              </el-tag>
              <p v-if="user.level === 'VIP'">到期时间: {{ user.expireDate }}</p>
              <p v-else>开通会员享受专属特权</p>
            </div>
          </div>
        </el-card>

        <el-card class="privilege-card">
          <div slot="header">
            <span>会员特权</span>
          </div>
          <div class="privilege-list">
            <div v-for="(item, index) in privileges" :key="index" class="privilege-item">
              <i :class="item.icon" :style="{ color: item.color }"></i>
              <div class="privilege-content">
                <h4>{{ item.title }}</h4>
                <p>{{ item.desc }}</p>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 右侧：套餐选择 -->
      <div class="member-plans">
        <el-card>
          <div slot="header">
            <span>选择套餐</span>
          </div>
          <div class="plan-list">
            <div
                v-for="plan in plans"
                :key="plan.id"
                class="plan-item"
                :class="{ 'plan-active': activePlan === plan.id }"
                @click="activePlan = plan.id"
            >
              <div class="plan-header">
                <h3>{{ plan.name }}</h3>
                <el-tag v-if="plan.tag" type="danger" size="mini">{{ plan.tag }}</el-tag>
              </div>
              <div class="plan-price">
                <span class="price">{{ plan.price }}</span>
                <span class="duration">/{{ plan.duration }}</span>
              </div>
              <div class="plan-original">
                原价: <del>{{ plan.originalPrice }}</del>
              </div>
              <div class="plan-desc">{{ plan.desc }}</div>
              <el-button
                  type="primary"
                  class="subscribe-btn"
                  @click.stop="showPaymentDialog(plan)"
              >
                立即开通
              </el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <el-dialog
        v-model="paymentDialogVisible"
        title="音乐VIP会员开通"
        width="500px"
        class="payment-dialog"
    >
      <div v-if="selectedPlan" class="dialog-content">
        <div class="member-status">
          <span>当前状态：</span>
          <el-tag :type="user.level === 'VIP' ? 'success' : 'info'" size="small">
            {{ user.level === 'VIP' ? 'VIP会员' : '普通用户' }}
            <span v-if="user.level === 'VIP'">({{ user.expireDate }}到期)</span>
          </el-tag>
        </div>

        <div class="plan-selected">
          <h3>{{ selectedPlan.name }}</h3>
          <div class="price-display">
            <span class="current-price">{{ selectedPlan.price }}</span>
            <span class="original-price">{{ selectedPlan.originalPrice }}</span>
            <el-tag v-if="selectedPlan.tag" type="danger" size="mini" class="discount-tag">{{ selectedPlan.tag }}</el-tag>
          </div>
          <p class="plan-desc">全平台可用（手机/电脑/Pad）</p>
        </div>

        <div class="payment-method">
          <h4>选择支付方式</h4>
          <div class="payment-options">
            <div
                class="payment-option"
                :class="{ 'active': paymentMethod === 'alipay' }"
                @click="paymentMethod = 'alipay'"
            >
              <div class="option-header">
                <i class="iconfont icon-alipay"></i>
                <span>支付宝支付</span>
              </div>
              <img
                  src="@/assets/AirPay.jpg"
                  alt="支付宝"
                  class="qr-code"
                  v-show="paymentMethod === 'alipay'"
              >
            </div>

            <div
                class="payment-option"
                :class="{ 'active': paymentMethod === 'wechat' }"
                @click="paymentMethod = 'wechat'"
            >
              <div class="option-header">
                <i class="iconfont icon-wechat"></i>
                <span>微信支付</span>
              </div>
              <img
                  src="@/assets/WCPay.jpg"
                  alt="微信支付"
                  class="qr-code"
                  v-show="paymentMethod === 'wechat'"
              >
            </div>
          </div>
        </div>

        <div class="agreement">
          <el-checkbox v-model="agreed">已阅读并同意</el-checkbox>
          <a class="agreement-link" @click="showAgreement('service')">《音乐VIP会员服务协议》</a>
        </div>
      </div>

      <template #footer>
        <el-button
            type="primary"
            class="pay-button"
            :disabled="!agreed"
            @click="handlePayment"
        >
          立即支付 {{ selectedPlan?.price }}
        </el-button>
      </template>
    </el-dialog>

    <!-- 新增协议弹窗 -->
    <el-dialog
        v-model="showAgreementDialog"
        :title="agreementTitle"
        width="700px"
        top="5vh"
    >
      <div class="agreement-content">
        <!-- 这里可以放置协议的具体内容 -->
        <div v-if="currentAgreement === 'service'">
          <h3>音乐VIP会员服务协议</h3>
          <p><h2>音了个音 VIP 会员服务协议</h2>
            <p>欢迎您阅读《音了个音 VIP 会员服务协议》并成为音了个音 VIP 会员！</p>
            <p>本协议是您与音了个音网站（以下统称为 “音了个音”）之间关于 “音了个音 VIP 会员” 以及音了个音提供的各项会员服务（以下统称为 “VIP 会员服务”）的法律协议。</p>
            <p>本协议中与您的权益（可能）存在重大关系的条款（包括相关免除音了个音责任的条款、限制您权利的条款、约定的争议解决方式及司法管辖条款等），<b>音了个音已采用字体加粗的方式来特别提醒您，请您留意重点查阅。您应当在确认充分阅读字体加粗条款，明确理解的前提下使用 VIP 会员服务。</b></p>
            <p>根据国家法律法规、监管政策及行业规范变化、互联网高速发展态势及服务运营需要，音了个音有权修改、替换、升级音了个音软件 / 服务，并提前向用户进行公示（包括但不限于弹出公告、网站公告、系统消息、邮件等方式进行公示），同时据实修改音了个音服务相关协议条款 / 规则以覆盖您与音了个音的所有权利与义务，前述修改的协议条款 / 规则自公示期满之日起生效。如果用户不同意或者不接受音了个音相关软件 / 服务的修改、替代、升级，有权拒绝、停止、取消使用音了个音服务。如用户继续使用音了个音服务，那么视为悉知变动内容并同意接受。</p>
            <p>如果您未满 18 周岁，请在法定监护人的陪同下阅读本协议。</p>
            <p>本协议是基于《音了个音用户使用协议》以及音了个音相关协议规范（统称为 “音了个音服务条款”）制定，与其是不可分割的；同时，音了个音不时发布的关于 VIP 会员的相关协议、活动规则等也是本协议的一部分，您在使用 VIP 会员服务的同时应遵守本协议、音了个音服务条款及前述相关协议、活动规则等所有条款。</p>
            <p>特别提示：您通过音了个音指定渠道开通 VIP 会员服务后，可能会由于您使用的软件版本、设备、操作系统等不同以及第三方原因导致您实际可使用的具体服务有差别，由此可能给您带来的不便，您表示理解，并不会因此向音了个音提出任何主张或追究音了个音任何责任。同时，本协议最终版本以音了个音网站网页端提供版本为最终版本。</p></p>
          <!-- 可以添加更多协议内容 -->
        </div>
      </div>
      <template #footer>
        <el-button type="primary" @click="showAgreementDialog = false">我已阅读</el-button>
      </template>
    </el-dialog>
    <!-- 新增协议弹窗 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        nickname: '音乐爱好者',
        avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        level: 'normal', // VIP or normal
        expireDate: '2023-12-31'
      },
      privileges: [
        {
          icon: 'el-icon-headset',
          title: '专属音质',
          desc: '享受Hi-Res无损音质',
          color: '#9c27b0'
        },
        {
          icon: 'el-icon-download',
          title: '下载特权',
          desc: 'VIP歌曲免费下载',
          color: '#673ab7'
        },
        {
          icon: 'el-icon-collection',
          title: '专属曲库',
          desc: '千万付费歌曲随心听',
          color: '#3f51b5'
        },
        {
          icon: 'el-icon-monitor',
          title: '专属皮肤',
          desc: '会员专属主题皮肤',
          color: '#2196f3'
        }
      ],
      plans: [
        {
          id: 1,
          name: '月度VIP',
          price: '¥15',
          originalPrice: '¥30',
          duration: '月',
          desc: '适合短期体验会员特权',
          tag: '推荐'
        },
        {
          id: 2,
          name: '年度VIP',
          price: '¥128',
          originalPrice: '¥360',
          duration: '年',
          desc: '节省60%，最受欢迎套餐',
          tag: '热销'
        },
        {
          id: 3,
          name: '三年VIP',
          price: '¥288',
          originalPrice: '¥1080',
          duration: '三年',
          desc: '节省73%，长期会员最优选',
          tag: '特惠'
        }
      ],
      activePlan: 2,
      paymentDialogVisible: false,
      selectedPlan: null,
      paymentMethod: 'alipay',
      // 新增协议弹窗
      showAgreementDialog: false,
      currentAgreement:'',
      agreementTitle: '', // 弹窗标题
    }
  },
  methods: {
    showPaymentDialog(plan) {
      this.selectedPlan = plan
      this.paymentDialogVisible = true
    },
    handlePayment() {
      this.$message.success('支付成功！会员特权已开通')
      this.user.level = 'VIP'
      // 这里实际应该调用支付接口
      this.paymentDialogVisible = false
    },
    // 新增方法：显示协议内容
    showAgreement(type) {
      this.currentAgreement = type;
      if (type === 'service') {
        this.agreementTitle = '音了个音VIP会员服务协议';
      } else if (type === 'renewal') {
        this.agreementTitle = '自动续费服务规则';
      }
      this.showAgreementDialog = true;
    }
  }
}
</script>

<style scoped>
.member-container {
  min-height: 100vh;
  background-color: #f9f0ff;
}

/* 顶部横幅 */
.member-banner {
  background: linear-gradient(135deg, #d1c4e9 0%, #b39ddb 100%);
  color: white;
  padding: 60px 0;
  text-align: center;
  margin-bottom: 30px;
}

.banner-content h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

.banner-content p {
  font-size: 18px;
  opacity: 0.9;
}

/* 主要内容区 */
.member-main {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.member-info {
  flex: 1;
  margin-right: 20px;
}

.member-plans {
  width: 60%;
}

/* 用户等级卡片 */
.info-card {
  margin-bottom: 20px;
}

.user-level {
  display: flex;
  align-items: center;
}

.level-avatar {
  margin-right: 20px;
}

.level-detail h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.level-detail p {
  margin: 10px 0 0;
  color: #666;
}

/* 特权列表 */
.privilege-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.privilege-item i {
  font-size: 24px;
  margin-right: 15px;
  flex-shrink: 0;
}

.privilege-content h4 {
  margin: 0 0 5px 0;
  color: #673ab7;
}

.privilege-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

/* 套餐列表 */
.plan-list {
  display: flex;
  justify-content: space-between;
}

.plan-item {
  width: 30%;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e1bee7;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.plan-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(179, 157, 219, 0.3);
}

.plan-active {
  border-color: #9c27b0;
  background-color: #f3e5f5;
}

.plan-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}

.plan-header h3 {
  margin: 0 10px 0 0;
  color: #673ab7;
}

.plan-price {
  font-size: 24px;
  color: #9c27b0;
  margin-bottom: 5px;
}

.plan-price .price {
  font-weight: bold;
}

.plan-price .duration {
  font-size: 14px;
}

.plan-original {
  color: #999;
  font-size: 12px;
  margin-bottom: 15px;
}

.plan-desc {
  color: #666;
  font-size: 13px;
  margin-bottom: 20px;
  min-height: 40px;
}

.subscribe-btn {
  width: 100%;
  background: linear-gradient(135deg, #ba68c8 0%, #9c27b0 100%);
  border: none;
}

/* 支付弹窗 */
.payment-content {
  text-align: center;
}

.payment-content h3 {
  color: #673ab7;
}

.payment-price {
  font-size: 18px;
  margin: 20px 0;
}

.payment-price span {
  color: #9c27b0;
  font-weight: bold;
  font-size: 24px;
}

.payment-method {
  margin-top: 30px;
  text-align: left;
}

.payment-method h4 {
  margin-bottom: 15px;
  color: #666;
}

.iconfont {
  font-size: 20px;
  margin-right: 5px;
}

.icon-alipay {
  color: #00a0e9;
}

.icon-wechat {
  color: #09bb07;
}

/* 新增支付弹窗样式 */
.payment-dialog .el-dialog {
  border-radius: 8px;
}

.payment-dialog .el-dialog__header {
  border-bottom: 1px solid #eee;
  padding: 15px 20px;
}

.payment-dialog .el-dialog__title {
  color: #222;
  font-size: 18px;
  font-weight: 600;
}

.dialog-content {
  padding: 0 20px;
}

.member-status {
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
}

.member-status .el-tag {
  margin-left: 5px;
}

.plan-selected {
  background: #f5f7fa;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 20px;
}

.plan-selected h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #222;
}

.price-display {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.current-price {
  font-size: 24px;
  font-weight: bold;
  color: #ff4e4e;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
  margin: 0 10px;
}

.discount-tag {
  transform: scale(0.9);
}

.plan-desc {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.payment-method {
  margin: 20px 0;
}

.payment-method h4 {
  font-size: 14px;
  color: #222;
  margin-bottom: 15px;
}

.payment-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.payment-option {
  display: flex;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 10px;
  margin: 0 !important;
  height: auto;
}

.payment-option.is-checked {
  border-color: #9c27b0;
  background-color: #f9f0ff;
}

.option-content {
  display: flex;
  align-items: center;
  width: 100%;
}

.option-content i {
  font-size: 24px;
  margin-right: 10px;
}

.icon-alipay {
  color: #00a0e9;
}

.icon-wechat {
  color: #07c160;
}

.qr-code {
  width: 120px;
  height: 120px;
  margin-left: auto;
}

.agreement {
  font-size: 12px;
  color: #666;
  margin: 20px 0;
  display: flex;
  align-items: center;
}

.agreement-link {
  color: #9c27b0;
  margin-left: 5px;
  text-decoration: none;
  cursor: pointer;
}

.agreement-link:hover {
  text-decoration: underline;
  color: #7b1fa2;
}

.pay-button {
  width: 100%;
  background: linear-gradient(135deg, #ba68c8 0%, #9c27b0 100%);
  border: none;
  border-radius: 4px;
  padding: 12px;
  font-size: 16px;
  font-weight: 500;
}

.pay-button.is-disabled {
  background: #ccc;
  cursor: not-allowed;
}
/* 新增支付弹窗样式 */

/* 新增协议弹窗样式 */
.agreement-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0 20px;
}

.agreement-content h3 {
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.agreement-content p {
  line-height: 1.8;
  margin-bottom: 15px;
  color: #555;
}
/* 新增协议弹窗样式 */
</style>